<template>
    <div>
        <div class="goods">
            <div class="goods_top">
                <div class="goods_top_left">
                    <img :src="obj.user.userpic">
                    <div class="goods_top_left_title">
                        <span class="name">{{ obj.user.username }}</span>
                        <span class="date">{{ obj.create_time | date }}</span>
                    </div>
                </div>
                <div class="goods_top_right">
                    <span>关注</span>
                </div>
            </div>
            <div class="title">
                {{ obj.content }}
            </div>
            <div v-if="obj.titlepic" class="big_img">
                <img :src="obj.titlepic">
            </div>
            <div class="goods_bottom">
                <div v-login="{ $router }" @click="ding_count">
                    <i class="el-icon-check"></i>
                    <span>{{ ding == 0 ? '支持' : ding }}</span>
                </div>
                <div v-login="{ $router }" @click="cai_count">
                    <i class="el-icon-close"></i>
                    <span>{{ cai == 0 ? '反对' : cai }}</span>
                </div>
                <div>
                    <i class="el-icon-chat-dot-square"></i>
                    <span>{{ obj.comment_count == 0 ? '评论' : obj.comment_count }}</span>
                </div>
                <div>
                    <i class="el-icon-position"></i>
                    <span>分享</span>
                </div>
            </div>
        </div>
        <div class="hr"></div>
    </div>
</template>
<script>
export default ({
    props: {
        obj: {
            type: Object
        }
    },
    data() {
        return {
            ding: 0,
            cai: 0,
        }
    },
    methods: {
        ding_count() {
            if (this.flag || this.cai_count == 0) return
            this.ding++
            this.cai--
            this.flag = true
        },
        cai_count() {
            if (!this.flag || this.ding_count == 0) return
            this.cai++
            this.ding--
            this.flag = false
        },
    },
    created() {
        this.ding = this.obj.ding_count
        this.cai = this.obj.cai_count
    }
})
</script>
<style scoped lang="scss">
@function r($v) {
    @return $v / (390 /10rem)
}

.hr {
    height: r(7);
    background-color: rgb(245, 245, 244);
}

.goods {
    padding: r(12);

    .goods_bottom {
        display: flex;
        margin-top: r(7);
        height: r(30);
        align-items: center;

        div {
            flex: 1;
            display: flex;
            justify-content: center;
            align-content: center;
            align-items: center;
            height: 100%;

            i {
                margin-right: r(10);
                font-size: r(18);
            }

            span {
                font-size: r(14);
                color: #666;
            }
        }
    }

    .big_img {
        height: r(182);
        border-radius: r(4);
        width: 100%;
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .title {
        margin: r(5) 0;
        line-height: r(32);
        font-size: r(18);
        color: #666;
        font-weight: bold;
    }

    .goods_top {
        height: r(55);
        display: flex;
        align-items: center;
        justify-content: space-between;

        .goods_top_right {
            width: r(45);
            height: r(25);
            background-color: #FF4A6A;
            border-radius: r(4);
            color: #fff;
            font-size: r(14);
            line-height: r(25);
            text-align: center;
        }

        .goods_top_left {
            display: flex;
            align-items: center;
            height: 100%;

            img {
                border-radius: 50%;
                width: r(40);
                height: r(40);
            }

            .goods_top_left_title {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                margin-left: r(12);
                height: 100%;

                .date {
                    font-size: r(15);
                    color: #A9A5A0;
                }

                .name {
                    font-size: r(18);
                    color: #666;
                    font-weight: 600;
                }
            }
        }
    }
}
</style>